<template>
	<div class="layout-padding-auto">
		<el-table
			:data="state.dataList"
			highlight-current-row
			v-loading="state.loading"
			border
			style="width: 100%; height: 100%"
			:cell-style="tableStyle.cellStyle"
			stripe
			:header-cell-style="tableStyle.headerCellStyle"
			:summary-method="getSummaries"
			show-summary
		>
			<el-table-column :label="$t('so.materialcode')" prop="materialCode" width="150px" show-overflow-tooltip :fixed="true" />

			<el-table-column :label="$t('so.saleqty')" prop="salesQty" width="150px" :fixed="true">
				<template #default="scope">
					<el-tag type="success">
						{{ scope.row.salesQty }}
					</el-tag>
				</template>
			</el-table-column>

			<el-table-column :label="$t('so.unit')" prop="unit" width="150px" :fixed="true" />

			<el-table-column :label="$t('so.baseqty')" prop="baseQty" width="150px" :fixed="true">
				<template #default="scope">
					<el-tag type="success">
						{{ scope.row.baseQty }}
					</el-tag>
				</template>
			</el-table-column>

			<el-table-column :label="$t('so.baseunit')" prop="baseUnit" width="150px" :fixed="true" />

			<el-table-column :label="$t('so.materialname')" prop="materialName" width="150px" />
			<el-table-column :label="$t('so.materialspec')" prop="materialSpec" width="300px" />
			<el-table-column :label="$t('so.pcsperbox')" prop="pcsPerBox" width="150px" />
			<el-table-column :label="$t('so.boxperpallet')" prop="boxPerPallet" width="150px" />
			<el-table-column :label="$t('so.starttray')" prop="startTrayNumber" width="150px" />
			<el-table-column :label="$t('so.endtray')" prop="endTrayNumber" width="150px" />
			<el-table-column :label="$t('so.trayqty')" prop="trayQty" width="150px" />
			<el-table-column :label="$t('so.traytype')" prop="trayType" width="300px" show-overflow-tooltip />
			<el-table-column :label="$t('so.series')" prop="productSeries" width="300px" show-overflow-tooltip />
			<el-table-column :label="$t('so.deliveryqty')" prop="deliveryQty" width="150px" show-overflow-tooltip />
			<el-table-column :label="$t('so.deliverydate')" prop="deliveryDate" width="200px" show-overflow-tooltip />
			<el-table-column :label="$t('so.masktype')" prop="maskType" width="300px" show-overflow-tooltip />
			<el-table-column :label="$t('so.oiltype')" prop="oilFilmType" width="300px" show-overflow-tooltip />
			<el-table-column :label="$t('so.cartonnumber')" prop="cartonNumber" width="300px" show-overflow-tooltip />
			<el-table-column :label="$t('so.cartonname')" prop="cartonName" width="300px" show-overflow-tooltip />
			<el-table-column :label="$t('so.cartonspec')" prop="cartonSpec" width="300px" show-overflow-tooltip />
			<el-table-column :label="$t('so.instrnum')" prop="instrutionNumber" width="300px" show-overflow-tooltip />
			<el-table-column :label="$t('so.instrdesc')" prop="instrutionDesc" width="300px" show-overflow-tooltip />
		</el-table>

		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	</div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { querySoDetail } from '/@/api/platform/report/salesorder';

const { t } = useI18n();

//搜索变量
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: querySoDetail,
});

const { currentChangeHandle, sizeChangeHandle, tableStyle, getDataList } = useTable(state);

// 父级点击的行
const parentClickRow = {};
// 通过id进行子表的查询
const query = (row: Object) => {
	// 赋值查询参数
	state.queryForm.soCode = row.soCode;
	// 保存选中的行数据
	Object.assign(parentClickRow, row);
	// 刷新子表数据
	getDataList();
};

// 刷新表格
const refresh = (row: any) => {
	state.queryForm.soCode = row;
	getDataList();
};

const getSummaries = (param) => {
	const { columns, data } = param;
	const sums: (string | VNode)[] = [];
	columns.forEach((column, index) => {
		if (index === 0) {
			sums[index] = h('div', { style: { textDecoration: 'underline', textAlign: 'center', fontWeight: 'bold' } }, ['SUM']);
			return;
		}

		if (index === 1 || index == 3) {
			const values = data.map((item) => Number(item[column.property]));
			if (!values.every((value) => Number.isNaN(value))) {
				sums[index] = ` ${values.reduce((prev, curr) => {
					const value = Number(curr);
					if (!Number.isNaN(value)) {
						return prev + curr;
					} else {
						return prev;
					}
				}, 0)}`;
				sums[index] = h('div', { style: { textAlign: 'center', fontWeight: 'bold' } }, sums[index])
			} else {
				sums[index] = '';
			}
		}
	});

	return sums;
};

// 暴露变量
defineExpose({
	refresh,
	query,
});
</script>

<style scoped>
.demo-image__error .image-slot {
	font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
	font-size: 30px;
}

.demo-image__error .el-image {
	width: 100%;
	height: 200px;
}

::v-deep(.el-table__cell) {
	position: static !important;
}

::v-deep(.el-image-viewer__mask) {
	opacity: 0.7 !important;
}
</style>